<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">

    </cu-custom>
    <!--背景图-->
    <image class="background-image" :src="baseUrl + backgroundUrl" mode="aspectFill"></image>

    <!--顶部个人信息栏 -->
    <view class="header-section">
      <view class="flex padding justify-between align-center user-info-box">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix"></image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">点击登录</view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">{{ name }}</view>
   <!--         <view class="u_subtitle">积分：{{ score }}</view> -->
          </view>
        </view>
        <view @click="handleToInfo" class="flex align-center">
          <text>个人信息</text>
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>

    <!-- 居中显示的游戏模式选择 -->
    <view class="mode-switcher">
      <transition name="fade-transform" mode="out-in">
        <view :key="currentMode">
          <view
              class="mode-item"
              :class="{ active: currentMode === 'normal' }"
              @click="switchMode('normal')"
          >
            普通模式
          </view>
          <view
              class="mode-item"
              :class="{ active: currentMode === 'challenge' }"
              @click="switchMode('challenge')"
          >
            挑战模式
          </view>
        </view>
      </transition>
    </view>

  </view>
</template>

<script>
import config from '@/config'
import { checkPermi, checkRole } from "@/utils/permission";
import { getGameBaseInfo } from "@/api/maple/gameBaseInfo"; // 假设接口已存在
const baseUrl = config.baseUrl;
export default {
  data() {
    return {
      name: this.$store.state.user.name,
      avatar: this.$store.state.user.avatar,
      score: this.$store.state.user.score || 0,
      backgroundUrl: '', // 从接口动态获取
      currentMode: 'normal', // 当前游戏模式
      windowHeight: uni.getSystemInfoSync().windowHeight,
	  baseUrl: baseUrl
    }
  },
  onShow() {
  	this.name = this.$store.state.user.name;
	this.avatar = this.$store.state.user.avatar;
  },
  onLoad() {
    this.fetchBackground();
  },
  methods: {
    fetchBackground() {
      getGameBaseInfo(1).then(res => {
        if (res.code === 200 && res.data) {
          this.backgroundUrl = res.data.images;
        }
      });
    },
   switchMode(mode) {
     this.currentMode = mode;
   
     // 根据模式跳转不同页面
     let path = '';
     if (mode === 'normal') {
       path = '/pages/game/normal/index'; // 普通模式页面路径
     } else if (mode === 'challenge') {
       path = '/pages/game/challenge/index'; // 挑战模式页面路径
     }
   
     if (path) {
       this.$tab.navigateTo(path);
     }
   },
    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index')
    },
    handleToEditInfo() {
      this.$tab.navigateTo('/pages/mine/info/edit')
    },
    handleToSetting() {
      this.$tab.navigateTo('/pages/mine/setting/index')
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login')
    },
    handleToAvatar() {
      this.$tab.navigateTo('/pages/mine/avatar/index')
    },
    handleLogout() {
      this.$modal.confirm('确定注销并退出系统吗？').then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$tab.reLaunch('/pages/index')
        })
      })
    },
    handleHelp() {
      this.$tab.navigateTo('/pages/mine/help/index')
    },
    handleAbout() {
      this.$tab.navigateTo('/pages/mine/about/index')
    },
    handleCustomerServer() {
      this.$tab.navigateTo('/pages/maple/customerServer/index')
    },
    handleFreedback() {
      this.$tab.navigateTo('/pages/maple/feedback/add')
    },
    checkPermi,
    checkRole,
  },
  switchMode(mode) {
    this.currentMode = mode;

    // 根据模式跳转不同页面
    let path = '';
    if (mode === 'normal') {
      path = '/pages/game/normal/index'; // 普通模式页面路径
    } else if (mode === 'challenge') {
      path = '/pages/game/challenge/index'; // 挑战模式页面路径
    }

    if (path) {
      this.$tab.navigateTo(path);
    }
  }

}
</script>

<style lang="scss">
.mine-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.85;
}

.header-section {
  padding: 30px 20px 20px 20px;
  background-color: rgba(60, 150, 243, 0.7);
  color: white;

  .user-info-box {
    position: relative;
    z-index: 1;
  }

  /* 用户头像和名称样式同前 */
}

.mode-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  z-index: 2;
}

.mode-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.mode-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #3c96f3;
}

.mode-switcher {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 50px;

  .mode-item {
	margin-top: 10px;  
    padding: 10px 20px;
    border-radius: 24px;
    background-color: rgba(60, 150, 243, 0.2);
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .mode-item.active {
    background-color: #3c96f3;
    color: #fff;
    font-weight: bold;
  }

  .fade-transform-enter-active,
  .fade-transform-leave-active {
    transition: all 0.3s ease;
  }

  .fade-transform-enter-from {
    opacity: 0;
    transform: translateX(-20px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(20px);
  }

  .mode-item {
    transition: all 0.2s ease;
    &:active {
      transform: scale(0.95);
      opacity: 0.8;
    }
  }

}
</style>
